//////////////////////////////////////////////////////////////////////////////////////////
//   _  _ ____ _  _ ___  ____                                                           //
//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     //
//                                                                                      //
//////////////////////////////////////////////////////////////////////////////////////////

// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: MIT

@use '../../variables.scss' as *;

.container {
  display: flex;
  color: $text-normal;
}

.sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 50px 0 0;
  width: 30%;

  ol {
    padding-left: 25px;
  }

  .chapter {
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 15px;
    font-weight: 300;
    position: relative;
    cursor: pointer;

    &.activeChapter {
      color: $text-link;
      font-weight: 600;
    }

    &:hover {
      color: $text-link;
    }
  }
}

.swiper {
  width: 70%;

  --swiper-pagination-color: #f0cece;
  --swiper-pagination-bullet-inactive-color: rgb(128, 128, 128);
  --swiper-pagination-bullet-inactive-opacity: 0.6;

  .slide {
    aspect-ratio: 5/4;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .fullSize {
      width: 100%;
      height: 100%;
    }

    background-size: cover;
    background-position: center;

    &:has(video) {
      background: none;
    }

    // Add some gloss.
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        170deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.05) 30%,
        rgba(255, 255, 255, 0) 30.1%
      );
      pointer-events: none;
    }

    .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 70px 10% 35px 10%;
      background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
      color-scheme: only dark;
    }

    .arrowHint1 {
      position: absolute;
      top: 8%;
      left: 50%;
      width: 45%;
      color-scheme: only dark;
      color: $text-normal;
    }

    .arrowHint2 {
      position: absolute;
      top: 32%;
      left: 75%;
      text-align: center;
      transform: translateX(-50%);
      width: 35%;
      color-scheme: only dark;
      color: $text-normal;
    }

    .arrowHint3 {
      position: absolute;
      top: 13%;
      left: 63%;
      width: 30%;
      color-scheme: only dark;
      color: $text-normal;
    }

    .pagination {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      cursor: pointer;

      .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 5px;
        border-radius: 50%;
        background-color: rgba(128, 128, 128, 0.5);

        &.activeDot {
          background-color: $text-link;
        }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  body:global(.systemColors) .slide {
    background-image: url('../../../../assets/images/settings-sakura-dark.webp');
  }
}

@media (prefers-color-scheme: light) {
  body:global(.systemColors) .slide {
    background-image: url('../../../../assets/images/settings-sakura-light.webp');
  }
}

body:global(.lightColors) .slide {
  background-image: url('../../../../assets/images/settings-sakura-light.webp');
}

body:global(.darkColors) .slide {
  background-image: url('../../../../assets/images/settings-sakura-dark.webp');
}
